<!doctype html>
<html lang="zh-CN" th:replace="admin-layout :: layout(~{::title}, ~{::link}, ~{::script}, ~{::body}, 'question-list')"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${data}?'修改试题':_">添加试题</title>
    <link rel="stylesheet" th:href="@{/common/zTree/css/demo.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/common/zTree/css/zTreeStyle/zTreeStyle.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/custom/css/question/admin-question.css}" type="text/css">
    <script type="text/javascript" th:src="@{/common/zTree/js/jquery.ztree.core.min.js}"></script>
    <script type="text/javascript" th:src="@{/common/zTree/js/jquery.ztree.excheck.min.js}"></script>
    <script>
        var $checkbox = $("#checkbox");
        var $radio = $("#radio");
        var $judge = $("#judge");
        var optionArr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];

        $(function () {
            var id = $("#id").val();
            if (id == undefined) {
                for (var i = 0; i < 4; i++) {
                    $("#addOptionBtn").click();
                }
            }
        })

        //切换试题类型
        $("select[name='type']").change(function () {
            //答案清空
            $("input[name='answer']").val("");
            //选项内容清空
            $('#optionBox').html("");
            //添加选项按钮显示
            $("#addOptionBtn").parent().removeClass("hidden");
            //显示选项和答案
            $(".type-abc").show();
            var type = $(this).val();

            //单选题、多选题
            if (type === "A" || type === "B") {
                for (var i = 0; i < 4; i++) {
                    $("#addOptionBtn").click();
                }
                //判断题
            } else if (type === "C") {
                //添加选项按钮隐藏
                $("#addOptionBtn").parent().addClass("hidden");
                for (var i = 0; i < 2; i++) {
                    var content = i == 0 ? "正确" : "错误";
                    $judge.find("[data-input='option']").attr("name", "optionDtoList[" + (i) + "].option");
                    $judge.find("[data-input='option']").val(optionArr[i]);
                    $judge.find("input[type='radio']").val(content);
                    $judge.find("input[type='radio']").attr("checked", false);
                    $judge.find("textarea").attr("name", "optionDtoList[" + (i) + "].content");
                    $judge.find("textarea").text();
                    $judge.find(".option-text").text(content);
                    $judge.find("[data-input='content']").attr("name", "optionDtoList[" + (i) + "].content");
                    $judge.find("[data-input='content']").val(content);
                    $('#optionBox').append($judge.html());
                }
            }

            //主观题
            else if (type === "D") {
                //隐藏选项和答案
                $(".type-abc").hide();
            }
        })

        //刷新选项
        function refreshOption() {
            $("input[name='answer']").val("");
            var type = $("select[name='type']").val();
            $("#optionBox .option-item").each(function (i, em) {
                if (type === "B") {
                    $(em).find("input").attr("name", "optionDtoList[" + (i) + "].option");
                    $(em).find("input").attr("value", optionArr[i]);
                    $(em).find("textarea").attr("name", "optionDtoList[" + (i) + "].content");
                    $(em).find(".option-text").text(optionArr[i]);
                } else if (type === "A") {
                    $(em).find("input[type='hidden']").attr("name", "optionDtoList[" + (i) + "].option");
                    $(em).find("input[type='hidden']").attr("value", optionArr[i]);
                    $(em).find("input[type='radio']").val(optionArr[i]);
                    $(em).find("textarea").attr("name", "optionDtoList[" + (i) + "].content");
                    $(em).find(".option-text").text(optionArr[i]);
                }
            })
            getAnswer();
        }

        //点击选项
        $(document).on("click", "#optionBox .option-btn", function () {
            getAnswer();
        })

        //获取答案
        function getAnswer() {
            var len = $("#optionBox .option-item").length;
            if (len) {
                var answer = "";
                $("#optionBox .option-btn").each(function (i, em) {
                    if ($(em).prop("checked")) {
                        answer = answer + $(em).val();
                    }
                })
                $("input[name='answer']").val(answer);
            }
        }

        //删除选项
        $(document).on("click", ".option-remove-btn", function () {
            $(this).parents(".option-item").remove();
            refreshOption();
        })

        //添加选项
        $("#addOptionBtn").click(function () {
            var type = $("select[name='type']").val();
            var len = $("#optionBox .option-item").length;
            if (type === "B") {
                $checkbox.find("input[type='hidden']").attr("name", "optionDtoList[" + (len) + "].option");
                $checkbox.find("input[type='hidden']").val(optionArr[len]);
                $checkbox.find("input[type='checkbox']").val(optionArr[len]);
                $checkbox.find("input[type='checkbox']").attr("checked", false);
                $checkbox.find("textarea").attr("name", "optionDtoList[" + (len) + "].content");
                $checkbox.find("textarea").text("");
                $checkbox.find(".option-text").text(optionArr[len]);
                $('#optionBox').append($checkbox.html());
            } else if (type === "A") {
                $radio.find("input[type='hidden']").attr("name", "optionDtoList[" + (len) + "].option");
                $radio.find("input[type='hidden']").val(optionArr[len]);
                $radio.find("input[type='radio']").val(optionArr[len]);
                $radio.find("input[type='radio']").attr("checked", false);
                $radio.find("textarea").attr("name", "optionDtoList[" + (len) + "].content");
                $radio.find("textarea").text("");
                $radio.find(".option-text").text(optionArr[len]);
                $('#optionBox').append($radio.html());
            }
        })

        //添加试题
        $("#submitBtn").click(function () {
            var content = $("textarea[name='content']").val();
            if (!content) {
                msgAlert("请输入试题内容")
                return;
            }
            //非单选题、多选题、判断题
            var type = $("select[name='type']").val();
            if (!(type === "D")) {
                var len = $("#optionBox .option-item").length;
                if (!len) {
                    msgAlert("请添加选项")
                    return;
                } else {
                    var b = true;
                    $("#optionBox textarea").each(function (i, em) {
                        if (!$(em).val()) {
                            b = false;
                        }
                    })
                    if (!b) {
                        msgAlert("请输入选项内容")
                        return;
                    }
                }
                var answer = $("input[name='answer']").val();
                if (!answer) {
                    msgAlert("请输入正确答案")
                    return;
                }
            }
            var analysis = $("textarea[name='analysis']").val();
            if (!analysis) {
                msgAlert("请输入试题解析")
                return;
            }
            $("#classifyIds").val(getSelectIds().toString());
            ajaxJson("/admin/question/ajax/save", $("#form").serialize(), function (res) {
                if (res.status) {
                    location.href = "/admin/question/list";
                }
            })
        })

        var setting = {
            check: {
                enable: true,
                chkboxType: {"Y": "s", "N": "ps"}
            },
            view: {
                dblClickExpand: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "parentId",
                    rootPId: "00000000"
                }
            },
            callback: {
                onCheck: zTreeOnCheck
            }
        };

        $(document).ready(function () {
            ajaxJson("/admin/classify/ajax/all", {}, function (res) {
                if (res.status) {
                    $.fn.zTree.init($("#treeDemo"), setting, res.data);
                    var id = $("#id").val();
                    if(id!=undefined){
                        var classifyIds = $("#classifyIds").val().split(",");
                        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                        for(var i =0;i<classifyIds.length;i++){
                            var node = treeObj.getNodeByParam("id", classifyIds[i], null);
                            treeObj.checkNode(node, true, true);
                        }
                    }
                }
            })
        });

        function zTreeOnCheck(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                nodes = zTree.getCheckedNodes(true);
            var html = "";
            for (var i = 0; i < nodes.length; i++) {
                html += '<span class="label label-success">' + nodes[i].name + '</span>'
            }
            $("#classifyNames").html(html);
            showMenu()
        }

        //获取选中id
        function getSelectIds(){
            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
            var nodes = treeObj.getCheckedNodes(true);
            var selections = []
            for(var i = 0;i<nodes.length;i++){
                selections.push(nodes[i].id);
            }
            return selections;
        }

        function showMenu() {
            var cityObj = $("#citySel");
            var cityOffset = $("#citySel").offset();
            $("#menuContent").css({
                left: cityOffset.left + "px",
                top: cityOffset.top - 70 + cityObj.outerHeight() + "px"
            }).slideDown("fast");

            $(document).bind("mousedown", onBodyDown);
        }

        function hideMenu() {
            $("#menuContent").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }

        function onBodyDown(event) {
            if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
                hideMenu();
            }
        }

        $("#citySel").click(function (e) {
            showMenu()
        })
    </script>
</head>
<body>
<!--<ol class="breadcrumb">
    <li><a th:href="@{/admin/question/list}">试题列表</a></li>
    <li class="active"th:text="${data}?'修改试题':_">添加试题</li>
</ol>-->
<form class="form-horizontal" id="form">
    <input type="hidden" name="id" th:if="${data}" th:value="${data.id}" id="id">
    <input type="hidden" name="classifyIds" th:value="${data}?${#strings.arrayJoin(data.classifyIds,',')}" id="classifyIds">
    <div class="form-group">
        <label class="col-sm-2 col-md-2 col-lg-3 control-label"><span class="text-danger">*&nbsp;</span>试题内容</label>
        <div class="col-sm-8 col-md-8 col-lg-6">
            <textarea class="form-control" rows="3" name="content" th:text="${data}?${data.content}"></textarea>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 col-md-2 col-lg-3 control-label"><span class="text-danger">*&nbsp;</span>试题类型</label>
        <div class="col-sm-8 col-md-8 col-lg-6">
            <select class="form-control" name="type">
                <option value="A" th:selected="${data}?${data.type}=='A'">单选题</option>
                <option value="B" th:selected="${data}?${data.type}=='B'">多选题</option>
                <option value="C" th:selected="${data}?${data.type}=='C'">判断题</option>
                <option value="D" th:selected="${data}?${data.type}=='D'">主观题</option>
            </select>
        </div>
    </div>
    <!--<div class="form-group">
        <label class="col-sm-2 col-md-2 col-lg-3 control-label"><span class="text-danger">*&nbsp;</span>试题标签</label>
        <div class="col-sm-8 col-md-8 col-lg-6">
            <select class="form-control" name="labelId">
                <option th:each="label:${labelList}" th:object="${label}" th:value="*{id}" th:text="*{name}"
                        th:selected="${data}?${data.labelId}==*{id}"></option>
            </select>
        </div>
    </div>-->
    <div class="form-group">
        <label class="col-sm-2 col-md-2 col-lg-3 control-label"><span class="text-danger">*&nbsp;</span>试题分类</label>
        <div class="col-sm-8 col-md-8 col-lg-6">
            <select class="form-control" name="classifyId">
                <option th:each="classify:${classifyList}" th:object="${classify}" th:value="*{id}" th:text="*{name}"
                        th:selected="${data}?${data.classifyId}==*{id}"></option>
            </select>
        </div>
    </div>
    <!--<div class="form-group" id="parent">
        <label class="col-sm-2 col-md-2 col-lg-3 control-label"><span class="text-danger">*&nbsp;</span>试题分类</label>
        <div class="col-sm-8 col-md-8 col-lg-6">
            <div id="classifyNames">
                <th:block th:if="${data}">
                <span th:each="classify:${data.classifyDtoList}" th:text="${classify.name}" class="label label-success"></span>
                </th:block>
            </div>
            <button type="button" class="btn btn-primary" id="citySel">选择</button>
        </div>
    </div>-->
    <div class="form-group type-abc" th:if="(${data}!=null and ${data.type}!='D') or ${data}==null">
        <label class="col-sm-2 col-md-2 col-lg-3 control-label"><span class="text-danger">*&nbsp;</span>试题选项</label>
        <div class="col-sm-8 col-md-8 col-lg-6">
            <div id="optionBox">
                <!--单选题-->
                <th:block th:if="${data}?${data.type}=='A'">
                    <div class="option-item" th:if="${data}" th:each="option:${data.optionDtoList}">
                        <div class="radio">
                            <label>
                                <input type="hidden" th:value="${option.option}"
                                       th:name="|optionDtoList[${optionStat.index}].option|">
                                <input type="radio" name="radio" class="option-btn" th:value="${option.option}"
                                       th:checked="${data}?${#strings.contains(data.answer,option.option)}">
                                <span class="option-text" th:text="${option.option}"></span>
                            </label>
                            <a href="javascript:void(0)" class="text-danger option-remove-btn"><span
                                    class="glyphicon glyphicon-minus"></span></a>
                        </div>
                        <textarea class="form-control" rows="3" th:name="|optionDtoList[${optionStat.index}].content|"
                                  th:text="${option.content}"></textarea>
                    </div>
                </th:block>

                <!--多选题-->
                <th:block th:if="${data}?${data.type}=='B'">
                    <div class="option-item" th:if="${data}" th:each="option:${data.optionDtoList}">
                        <div class="checkbox">
                            <label>
                                <input type="hidden" th:value="${option.option}"
                                       th:name="|optionDtoList[${optionStat.index}].option|">
                                <input type="checkbox" class="option-btn" th:value="${option.option}"
                                       th:checked="${data}?${#strings.contains(data.answer,option.option)}">
                                <span class="option-text" th:text="${option.option}"></span>
                            </label>
                            <a href="javascript:void(0)" class="text-danger option-remove-btn"><span
                                    class="glyphicon glyphicon-minus"></span></a>
                        </div>
                        <textarea class="form-control" rows="3" th:name="|optionDtoList[${optionStat.index}].content|"
                                  th:text="${option.content}"></textarea>
                    </div>
                </th:block>

                <!--判断题-->
                <th:block th:if="${data}?${data.type}=='C'">
                    <div class="option-item" th:if="${data}" th:each="option:${data.optionDtoList}">
                        <div class="radio">
                            <label>
                                <input type="hidden" th:value="${option.option}" data-input="option"
                                       th:name="|optionDtoList[${optionStat.index}].option|">
                                <input type="radio" name="radio" class="option-btn" th:value="${option.content}"
                                       th:checked="${data}?${#strings.contains(data.answer,option.content)}">
                                <span class="option-text" th:text="${option.content}"></span>
                                <input type="hidden" th:value="${option.content}" data-input="content"
                                       th:name="|optionDtoList[${optionStat.index}].content|">
                            </label>
                        </div>
                    </div>
                </th:block>
            </div>
            <p class="form-control-static"
               th:if="(${data}!=null and (${data.type}=='A' or ${data.type}=='B') or ${data}==null)"><a
                    href="javascript:void(0)" id="addOptionBtn"><span class="glyphicon glyphicon-plus"></span></a></p>
        </div>
    </div>
    <div class="form-group type-abc" th:if="(${data}!=null and ${data.type}!='D') or ${data}==null">
        <label class="col-sm-2 col-md-2 col-lg-3 control-label"><span class="text-danger">*&nbsp;</span>正确答案</label>
        <div class="col-sm-8 col-md-8 col-lg-6">
            <input type="text" class="form-control" placeholder="正确答案" name="answer" readonly
                   th:value="${data}?${data.answer}">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 col-md-2 col-lg-3 control-label"><span class="text-danger">*&nbsp;</span>试题解析</label>
        <div class="col-sm-8 col-md-8 col-lg-6">
            <textarea class="form-control" rows="3" name="analysis" th:text="${data}?${data.analysis}"></textarea>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-md-offset-2 col-lg-offset-3 col-sm-8 col-md-8 col-lg-6">
            <button type="button" class="btn btn-primary" id="submitBtn">提交</button>
            <button type="button" class="btn btn-warning backBtn">返回</button>
        </div>
    </div>
</form>

<!--多选模板-->
<div id="checkbox" class="hidden">
    <div class="option-item">
        <div class="checkbox">
            <label>
                <input type="hidden" value="">
                <input type="checkbox" class="option-btn">
                <span class="option-text">A</span>
            </label>
            <a href="javascript:void(0)" class="text-danger option-remove-btn"><span
                    class="glyphicon glyphicon-minus"></span></a>
        </div>
        <textarea class="form-control" rows="3"></textarea>
    </div>
</div>

<!--单选模板-->
<div id="radio" class="hidden">
    <div class="option-item">
        <div class="radio">
            <label>
                <input type="hidden" value="">
                <input type="radio" name="radio" class="option-btn">
                <span class="option-text">A</span>
            </label>
            <a href="javascript:void(0)" class="text-danger option-remove-btn"><span
                    class="glyphicon glyphicon-minus"></span></a>
        </div>
        <textarea class="form-control" rows="3"></textarea>
    </div>
</div>

<!--判断模板-->
<div id="judge" class="hidden">
    <div class="option-item">
        <div class="radio">
            <label>
                <input type="hidden" value="" data-input="option">
                <input type="radio" name="radio" class="option-btn">
                <span class="option-text">正确</span>
                <input type="hidden" value="" data-input="content">
            </label>
        </div>
    </div>
</div>
<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
    <ul id="treeDemo" class="ztree" style="margin-top:0;"></ul>
</div>
</body>
</html>